<template>
	<Drawer
        :value="value"
        :title="title"
        :width="width"
        :closable="closable"
        :mask="mask"
        :mask-closable="maskClosable"
        :placement="placement"
        :styles="styles"
        class-name="ui-drawer"
        @on-close="handleClose"
        @on-visible-change="handleVisibleChange"
    >
        <slot></slot>
        <div v-if="showFooter" class="ui-drawer-footer">
            <slot name="footer">
            	<Button style="margin-right: 8px" @click="handleCancel">{{ cancelText }}</Button>
            	<Button type="primary" @click="handleOk">{{ okText }}</Button>
            </slot>
        </div>
    </Drawer>
</template>

<script>
export default {
	name: 'drawerForm',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		},
		width: {
			type: Number | String,
			default: 350
		},
		closable: {
			type: Boolean,
			default: true
		},
		maskClosable: {
			type: Boolean,
			default: true
		},
		mask: {
			type: Boolean,
			default: true
		},
		placement: {
			type: String,
			default: 'right'
		},
		okText: {
			type: String,
			default: '确定'
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		showFooter: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			styles: {
                height: 'calc(100% - 50px)',
                overflow: 'auto',
                paddingBottom: '53px',
                position: 'static'
            }
		}
	},
	methods: {
		handleClose() {
			this.$emit('on-close');
		},
		handleVisibleChange(status) {
			this.$emit('input', status);
			this.$emit('on-visible-change', status);
		},
		handleOk() {
			this.$emit('on-ok');
		},
		handleCancel() {
			this.$emit('input', false);
			this.$emit('on-cancel');
		}
	}
}
</script>

<style>
.ui-drawer .ivu-drawer-header .ivu-drawer-header-inner {
	font-weight: bold;
}
.ui-drawer-footer {
	width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}
</style>